/**
 * 开单、修改订单页
 * 此页面进入的方式有：1.从订单列表点开单、修改进入 2.其他页面跳转进入 3.甲方页面跳转进入
 */
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useEffect, useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Divider, Modal, FormInstance, message, Spin } from 'antd';
import ItemInfo from './ItemInfo';
import SettlementInfo from './SettlementInfo';
import PayDialog from './PayDialog';
import { useModel } from 'umi';
import {
  submitZcOrder,
  getZcOrderDetail,
} from '@/services/order/api';
import {
  getGoodsSpecsList
} from '@/services/stock-goods/api';
import { MsgType, showMsg, isNull } from '@/utils/utils';
import { history } from 'umi';
import '../onceOrder/style.less';
import BreadcrumbDept from '@/components/BreadcrumbDept';
import ChoicePatient from '@/components/ChoicePatient';
import Detail from './Detail';

const { confirm } = Modal;


interface DoctorBillProps {
  location?: any;
}

const DoctorBill: React.FC<DoctorBillProps> = (props) => {
  const { location } = props;
  const { query } = location;
  const { type, order_id, eventNo } = query; // type: add=开单，edit=修改订单，reopen=重新开单， order_id：订单编号，eventNo=病案号/身份证号/住院号（一般是在甲方系统点进来进行开单操作）
  const { initialState } = useModel('@@initialState'); // 获得当前登录账号的一些信息
  const formRef = useRef<FormInstance>();
  const goodsRef = useRef(); // 获取商品信息的实例
  const settRef = useRef(); // 获取结算信息的实例
  const patientRef = useRef(); // 获得患者信息的实例
  const [printing, setPrinting] = useState(false); // 是否打印

  const [loading, setLoading] = useState(false);

  // 患者信息
  const [patientInfo, setPatientInfo] = useState<ORDERAPI.PatientInfo>({} as ORDERAPI.PatientInfo);
  // 商品列表
  const [goodsList, setGoodsList] = useState<STOCKGOODSAPI.GoodsItem[]>([]);
  // 原始商品列表，用于还原数据
  const [yuanGoodsList, setYuanGoodsList] = useState<STOCKGOODSAPI.GoodsItem[]>([]);
  // 结算信息
  const [settleInfo, setSettleInfo] = useState<any>({});
  // 支付弹窗
  const [payDialogVisible, setPayDialogVisible] = useState<boolean>(false);
  // 订单详情
  const [orderDetail, setOrderDetail] = useState({});

  // 详情弹窗
  const [detailVisible, setDetailVisible] = useState<boolean>(false);


  // 根据商品id、部门编号获得商品规格
  const getSpe = (goods_id, goods_dept_code) => {
    return new Promise(async (resolve, reject) => {
      const data: STOCKGOODSAPI.GoodsSpecsItemList = await getGoodsSpecsList({ goods_id, goods_dept_code, current: 1, pageSize: 10000 });
      resolve(data.record_list || []);
    });
  }

  useEffect(() => {
    init();
  }, [order_id]);

  // 重置页面，更换患者保存后调用
  const resetPage = () => {
    patientRef.current.clear();
    goodsRef.current.clear();
    settRef.current.clear();
  }
  const init = () => {
    // 有订单号，查询订单详情
    if (order_id) {
      setLoading(true);
      getZcOrderDetail(order_id).then(data => {
        setLoading(false);
        setOrderDetail(data);
        const patinfo = {
          patient_name: data.patient_name,
          patient_id: data.patient_id,
          identity_no: data.identity_no,
          mobile: data.mobile,
          ic_card_no: data.ic_card_no,
          admission_num: data.admission_num,
          create_dept_name: data.create_dept_name,
          visit_no: data.admission_num,
        };
        setPatientInfo(patinfo as ORDERAPI.PatientInfo);

        // 给自定义模块的患者信息区域赋值
        patientRef.current?.update(patinfo);

        // 把订单详情已有的商品信息显示出来，需要循环调用接口获取每个商品的规格列表  start
        const apilist = [];
        const goodsList = data.goodsList.map((item, key) => {
          apilist.push(getSpe(item.goods_id, item.goods_dept_code));
          return {
            id: item.record_id,
            ...item
          }
        })
        Promise.all(apilist).then(res => {
          res.forEach((element, key) => {
            goodsList[key].specsList = element;
            goodsList[key].disabled = true; // 默认禁用输入框
          });
          setGoodsList(Object.assign([], goodsList));
          setYuanGoodsList(JSON.parse(JSON.stringify(goodsList))); // 用上面的方式没效果，所以换了一种方式
        });
        // 把订单详情已有的商品信息显示出来，需要循环调用接口获取每个商品的规格列表  end

        setSettleInfo({
          ...data,
        });

        formRef.current?.setFieldsValue({
          patient_name: data.patient_name
        });
        // setPayDialogVisible(true); // 打开支付前确认订单弹窗
      })
    } else if (!isNull(eventNo)) { // 单点登录来的住院号，则查询用户信息
      patientRef.current.fetch?.(eventNo)
    }
  }

  // 提交表单前的表单验证
  const checkForm = (values) => {
    // 没有患者信息
    if (!patientInfo.patient_name) {
      showMsg('请先输入患者信息', MsgType.INFO);
      return false;
    }

    console.log('goodsListgoodsList', goodsList)

    // 商品信息
    if (!goodsList.length) {
      showMsg('请添加商品信息', MsgType.INFO);
      return false;
    }

    // 结算价格
    const js = parseFloat(values.sett_price);
    if (js < 0.01 * values.goodsNum) {
      message.error(`结算价格最少为${0.01 * values.goodsNum}，请修改！`);
      return false;
    }
    return true;
  }

  /**
   * 提交订单
   * @param values
   * @returns
   */
  const onFinish = async (values: any) => {
    if (checkForm(values)) {
      const data = {
        ...patientInfo,
        goodsList,
        ...values,
        admission_num: patientInfo.visit_no, // 住院号字段单独传入
        remarks: '',
        total_price: values.goods_total_price,
        apply_oper_code: '',
      }
      console.log('data', data)

      // return;
      goodsRef.current.validate().then(async res => {
        // 表格信息都填写了
        if (res) {
          // 判断是否有重复添加的
          const newArr=goodsList.map(item=>`${item.goods_id}_${item.specs_name}`);
          const isRepeat=newArr.some((item,index,arr)=>arr.indexOf(item)!=index);
          if (isRepeat) {
            showMsg('您有重复添加的商品信息，请修改');
            return;
          }

          setLoading(true);
          // 保存订单
          submitZcOrder(data).then((data) => {
            showMsg('已提交', MsgType.SUCCESS);
            setSettleInfo(data);
            setPayDialogVisible(true);
            // init();
            // 如果地址栏没有eventNo，则保存后跳回到列表页
            if (!isNull(eventNo)) {
              history.replace(`/order/zc-order`);
            } else { // 停留在该页面，并重置页面信息，以方便操作人员输入其他患者信息进行操作
              resetPage();
            }
          }).catch(error => {
            setLoading(false);
            showMsg(error?.data?.errmsg)
          });
        } else {
          showMsg('您还有未完成的商品信息');
        }
      });
    }
  }

  // 点击更换患者按钮的提示
  function showConfirm() {
    const result = goodsRef.current.isNull();
    // console.log('result', result);
    // 如果商品信息有录入则提示
    if (!result) {
      confirm({
        title: '当前有未保存的订单信息，是否保存？',
        icon: <ExclamationCircleOutlined />,
        okText: '保存',
        cancelText: '放弃',
        onOk() {
          settRef.current.submit();
        },
        onCancel() {
          // console.log('Cancel');
          setPatientInfo({});
          goodsRef.current.clear();
          settRef.current.clear();
          setPatientInfo({});
          patientRef.current.clear();
        },
      });
    } else {
      setPatientInfo({});
      goodsRef.current.clear();
      settRef.current.clear();
      setPatientInfo({});
    }
    setPatientLevelInfo({});
  }

  return (
    <PageContainer title="中创订单开单" extra={<BreadcrumbDept />} breadcrumb={{}} onBack={() => history.goBack()}>
      <Spin spinning={loading}>
        <div className="service-record">
          <div className="header">
            <div className="title">1.患者信息</div>
          </div>
          <Divider />
          {/* 患者信息自定义组件 */}
          <ChoicePatient
            caseNoKey={initialState?.canAll ? 'out_case_no' : 'case_no'} // 用于判断接口用哪个字段进行查询，带out_的代表接口查询的时候不限制科室查询，如出院办结可用
            ref={patientRef}
            onChoice={(info) => {
              goodsRef.current.addLine(); // 查询到患者后，默认给商品信息添加一行数据
              setPatientInfo(Object.assign({}, info));
            }}
            changePatient={showConfirm}
            showMore={false}
            fromTo='onceOrder'
          />
        </div>


        {/* 商品信息区 */}
        <ItemInfo
          ref={goodsRef}
          type={type}
          list={goodsList}
          yuanlist={yuanGoodsList}
          updateGoodsList={setGoodsList}
        />
        {/* 结算信息区 */}
        <SettlementInfo
          ref={settRef}
          onFinish={onFinish}
          goodsList={goodsList}
          settleInfo={settleInfo}
          type={type}
          onCancel={() => history.goBack()}
        />

        {
          // 发起支付前确认订单弹窗
          payDialogVisible && <PayDialog
            patientInfo={patientInfo}
            goodsList={goodsList}
            settleInfo={settleInfo}
            handleModalVisible={() => history.goBack()}
            reload={(isPrint: Boolean) => {
              setDetailVisible(true);
              setPayDialogVisible(false);
              setPrinting(isPrint);
            }}
            onPrint={() => {
              setPrinting(true);
              setDetailVisible(true);
              setPayDialogVisible(false);
            }}
          />
        }
        {
          // 查看订单详情弹窗
          detailVisible && <Detail
            isPrint={printing}
            handleModalVisible={() => {
              // setDetailVisible(false);
              // init();
              history.goBack();
            }}
            record={settleInfo}
          />
        }
      </Spin>
    </PageContainer>
  );
};
export default DoctorBill;
